<template>
  <div
    v-if="demand"
    class="demand-container"
  >
    <toppanel
      :title="demand.title"
      back-visible
      use-toggle
      bgcolor="transparent"
    />
    <scalebox :ratio="2">
      <image
        :src="demand.thumb"
        mode="aspectFill"
      />
    </scalebox>

    <scroll-view
      class="demand-body"
      :scroll-y="true"
    >
      <van-cell-group
        custom-class="demand-header van-cell-group-radius"
        :border="false"
      >
        <van-cell
          :title="demand.title"
          custom-class="autofit-cell demand-header-info"
          use-label-slot
        >
          <view slot="label">
            <view
              class="match-board"
              v-if="demand.category"
            >
              <view class="match-board-text">{{demand.category.name}}</view>
            </view>
          </view>
        </van-cell>
        <user-cell
          :border="false"
          :icon="demand.user.avatar"
          :title="demand.user.companyName"
          :label="demand.user.username"
        />
      </van-cell-group>
      <view v-if="user && user.actived">
        <van-cell-group
          v-if="demand.body.length>0"
          custom-class="content-body"
          :border="false"
        >
          <p
            v-for="(text,index) in demand.body"
            :key="index"
            class="content-body__paragraph"
          >
            {{ text }}
          </p>
          <p
            class="content-body__image"
            v-for="(image,index) in demand.images"
            :key="index"
          >
            <image
              :src="image.path"
              mode="widthFix"
            />
          </p>
        </van-cell-group>
        <van-cell-group
          v-if="demand.attach"
          custom-class="content-attach"
        >
          <download-cell
            icon="/static/icons/attach.png"
            title="附件:"
            :file-name="demand.attach.filename"
            :file-path="demand.attach.path"
          />
        </van-cell-group>
        <van-cell-group
          v-if="demand.solutions.length>0"
          title="解决方案"
          custom-class="content-solutions"
        >
          <van-cell
            v-for="(solution,index) in demand.solutions"
            :key="index"
            use-label-slot
            custom-class="solution-cell"
          >
            <view slot="title">
              <view class="van-multi-ellipsis--l2">
                {{solution.title}}
              </view>
            </view>
            <view
              slot="label"
              class="solution-extend"
            >
              <view
                v-if="solution.user"
                class="solution-extend__company"
              >{{solution.user.companyName}}</view>
              <view class="solution-extend__owner">
                <view v-if="solution.user">{{solution.user.username}}</view>
                <view>{{solution.publish_time}}</view>
              </view>
            </view>
          </van-cell>
        </van-cell-group>
      </view>
      <view
        v-else
        class="demand-needlogin"
      >
        <view>当前需求详细内容信息需要您登录后才可以查看</view>
        <van-divider
          dashed
          contentPosition="center"
          textColor="#1989fa"
        >
          <van-button>登录</van-button>
          <van-button>注册</van-button>
        </van-divider>
      </view>

    </scroll-view>
    <page-action>
      <van-button
        plain
        icon="chat"
        type="info"
        @click="onClickReply"
      >
        回复需求
      </van-button>
      <van-button
        plain
        icon="share"
        color="#666"
        open-type="share"
      >
        我要分享
      </van-button>
    </page-action>
  </div>
</template>

<script>
import UserCell from '@/components/cell/user'
import DownloadCell from '@/components/cell/download'
import Scalebox from '@/components/scalebox'
import PageAction from '@/components/action'
import toppanel from '@/components/toppanel'
import { needViewApi } from '@/api'

export default {
  components: {
    UserCell,
    PageAction,
    toppanel,
    Scalebox,
    DownloadCell
  },

  data () {
    return {
      id: 0,
      scroll: {
        x: false,
        y: true
      },
      demand: null,
      titleColor: '#000000',
      show: false,
      downloading: false,
      downloadProgress: 0,
      tempFile: '',
      user: null
    }
  },
  onLoad (option) {
    this.id = option.id
  },
  methods: {
    // 获取数据方法
    getList () {
      console.log('demand/detail view')
      needViewApi(this.id)
        .then((res) => {
          console.log(res)
          this.demand = res
        })
        .catch((e) => {
          console.log(e)
        })
    },
    onClickReply () {
      let url = '/pages/reply/main?id=' + this.demand.id
      console.log(url)
      this.pushNativelink({
        type: 'push',
        route: url,
        allow: 'authented',
        tips: '完善资料后方可进行回复'
      })
      console.log('onClickReply')
    }
  },
  onShow () {
    console.log('onShow')
    this.userData = mpvue.getStorageSync('mine')
    this.getList()
  },
  onShareAppMessage (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: this.title,
      path: '/pages/demand/main?id=' + this.id + '&from=share'
    }
  }
}
</script>

<style lang="less">
page {
  height: 100%;
}
.demand {
  &-container {
    height: 100%;
    background: #f1f2f4;
  }
  &-needlogin {
    margin: 15px;
    border-radius: 5px;
    padding: 20px 25px;
    background: #fff;
    &__logintips {
      width: 100%;
      height: 100%;
    }
  }
}
.content {
  &-body {
    padding: 10px 15px;
    background: #fff;
    p {
      margin-bottom: 10px;
      &:last-child {
        margin: 0;
      }
    }
    &__paragraph {
      text-indent: 1em;
    }
    &__image {
      image {
        width: 100%;
      }
    }
  }
  &-attach {
    margin: 10px 0;
    &__download {
      .van-cell__value {
        flex: none;
      }
    }
    &__file {
      position: relative;
      .van-progress {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
      }
    }
    &__btn {
      margin-left: 10px;
      .van-button {
      }
    }
  }

  &-solutions {
    .solution-cell {
      padding: 15px;
    }
    .solution-extend {
      margin-top: 10px;
      &__owner {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

.demand-body {
  margin-top: -10px;
}
.demand-header {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  &-info {
    .van-cell__title {
      font-size: 18px;
      font-weight: bold;
    }
    .van-cell__label {
      margin-top: 10px;
    }
    .van-cell__value {
      flex: none;
    }
    .match-rate {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding-left: 15px;
      position: relative;
      margin-left: 15px;
      &::before {
        content: '';
        width: 1px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: #f2f3f4;
        transform: scale(0.5, 1);
      }
      &-point {
        font-size: 18px;
        color: coral;
        font-weight: bold;
      }
    }
  }
}
.match-board {
  display: inline-flex;
  align-items: center;
  &-icon {
    background: #1f2322;
    color: #fff;
    border-radius: 3px 0 0 3px;
    padding: 2px 5px;
  }
  &-text {
    color: #333;
    background: #fedab7;
    border-radius: 3px;
    font-size: 12px;
    padding: 2px 5px;
  }
  &-icon + &-text {
    border-radius: 0 3px 3px 0;
  }
}

.van-cell-group__title {
  font-size: 14px !important;
  font-weight: bold !important;
  color: #000 !important;
  padding: 10px 15px !important;
}
</style>
